<template>
  <div class="parent" onselectstart="return false">
    <el-container class="box">
      <el-header>
        <router-link to="/main" tag="span" style="height: 100%;"><img src="../assets/images/log.png" style="height: 100%;"></router-link>
        <!--<span>BOOT MUSIC</span>-->
        <!--下拉菜单-->
        <el-dropdown>
          <span><el-avatar :size="50" :src="circleUrl"></el-avatar></span>
          <span style="color: white">{{manager}}</span>
          <el-dropdown-menu slot="dropdown">
            <span @click="logout"><el-dropdown-item>退出</el-dropdown-item></span>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside :width="tagWidth + 'px'">
          <!--折叠导航-->
          <div>
            <span style="color: #fff;" class="el-icon-more-outline" @click="changeTag"></span>
          </div>
          <!--左侧导航-->
          <el-menu :default-active="subMenuState" class="el-menu-vertical-demo" :unique-opened="true"
                   active-text-color="#FFFF00" router background-color="#409EFF" :collapse="isCollapse" text-color="#fff">
            <!--一级菜单-->
            <el-submenu v-for="(menus1, index) in menus" :key="index" :index="menus1.action">
              <template slot="title">
                <i :class="menus1.icon" style="color: #FFF"></i>
                <span slot="title">{{menus1.title}}</span>
              </template>
              <el-menu-item-group>
                <!--二级菜单-->
                <el-menu-item v-for="(menus2, index) in menus1.items" :key="index"
                              :index="menus2.path" @click="saveChange(menus2.path)">
                  <template slot="title">
                    <!--图标-->
                    <!--<i :class="menus2.icon"></i>-->
                    <!--文本-->
                    <span>{{menus2.title}}</span>
                  </template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container class="main">
          <el-main><router-view/></el-main>
          <el-footer>
            <div>这是湖北工业大学工程技术学院16gb软件(三)班任金明的毕业设计项目，未经允许禁止使用。</div>
            <div>作者邮箱：17340544163@163.com。项目github地址：https://gitee.com/huoyunxingping/boot-music-web.git</div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import menus from '../plugins/menuDB.js'
export default {
  data () {
    return {
      subMenuState: '/main',
      tagWidth: 200,
      // 导航栏控制按钮
      isCollapse: false,
      // 导航栏数据
      menus: menus,
      // 管理员
      manager: '',
      // 头像
      circleUrl: 'https://infinitypro-img.infinitynewtab.com/custom-icon/8001dsp8vaisq6von2i1r73m22ha2f.png?imageMogr2/thumbnail/240x/format/webp/blur/1x0/quality/100|imageslim'
    }
  },
  methods: {
    // 保存状态
    saveChange (active) {
      console.log(active)
      window.sessionStorage.setItem('active', active)
    },
    // 切换导航栏
    changeTag () {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse === true) {
        this.tagWidth = 63
      } else {
        this.tagWidth = 200
      }
    },
    // 登录
    logout () {
      console.log('logout')
      window.sessionStorage.clear()
      this.$router.push('/')
    }
  },
  updated () {
    this.subMenuState = window.sessionStorage.getItem('active')
    console.log(this.subMenuState)
  },
  created () {
    if (window.sessionStorage.getItem('active') !== null) {
      this.subMenuState = window.sessionStorage.getItem('active')
    }
    this.manager = window.sessionStorage.getItem('manger')
  }
}
</script>

<style scoped>
  .el-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #409EFF;
    color: #FFF;
  }
  .el-aside{
    background-color: #409EFF;
  }
  .el-dropdown {
    flex: 1;
    text-align: right;
    align-self: center;
  }
  .parent, .box, .main{
    height: 100%;
  }
  .el-main{
    padding: 0 15px;
    height: 95%;
  }
  /*.el-footer{*/
    /*padding: 0;*/
    /*height: 5%;*/
  /*}*/
</style>
